import React from 'react';
import '../channelManage/channelList.less';
import {  Breadcrumb, Icon, Button, Table, Modal, Input, Select, Pagination, message ,Row,Col,DatePicker,Form,Checkbox,AutoComplete,InputNumber,Upload } from 'antd';
import $ from 'jquery';
import Config from '../../common/config';
import convertCurrency from '../commonFunction/convertCurrency';
import getFormatDate from '../commonFunction/getFormatData';
import noRepeat from '../commonFunction/noRepeat';
import { hashHistory } from 'react-router';
import moment from 'moment';
const config = new Config();
const { RangePicker } = DatePicker;
const { TextArea } = Input;
const FormItem = Form.Item;
const Option = Select.Option;
const userInfo = JSON.parse(sessionStorage.getItem('UserInfo')); //用户信息
const root = userInfo.root;
class ChannelList1 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,//我的申请模态框
            dateStr:['',''],//默认今天的日期字符串
            date:['',''],//默认今天的日期
            selectedApplyState:'',//筛选状态
            selectedProduct:'',//筛选产品
            selectedUmbrellaName:'',//筛选平台
            applyPeopleName:'',//筛选负责人姓名
            channelList: [],//申请列表
            channelcount: 0,//申请列表条数
            pageindex:1,//当前页码
            pagesize:2,//开始默认加载200条
            isLooking:false, //是否是查看
            isEdit:false,//是否是编辑
            record:{},//单条记录信息
            allSpentMoney:0,//总消费金额
            allInputLines:0,//总进线
            allOutput:0,//总产值
            lastTImeMoney:0,//上次充值金额
            inputAllMoney:0,//充值总额
            allCharge:0,//总成单金额
            againBoughtMoney:0,//其中复购总值
            moneyLeft:0,//余额
            allBillCount:0,//总成单数
            isRefund:false,//是否为退费
            allAreRefund:false,//是否筛选条件为全部退费
            selectionList:[[],[],[],[]],//筛选列表
            selectedRows:[],//
            pageNum: 1, // 当前页码
            matchProducts:[],//产品自动完成列表
            matchProducts1:[],//平台自动完成列表
            selectValue:'',//产品自动完成列表选中的值
            selectValue1:'',//平台自动完成列表选中的值
            allCreateData:[],//新增时候拿到的数据
            authTreeOfOne:{},//小工具权限
            channelList2:[{}],//总计列表
            fileList: [],//图片列表
            previewVisible: false,//预览图片
            previewImage: '',//预览图片
            originChannelList:[],//yuanshi
        }
    }
    componentWillMount(){
        console.log(userInfo.auth);
        if(userInfo.auth){
            if(userInfo.auth['橘色小工具']){
                this.setState({
                    authTreeOfOne:userInfo.auth['橘色小工具']
                },()=>{
                    console.log(this.state.authTreeOfOne['/payrequest/save']);
                })
            }
        }
    }
    componentDidMount() {
        //筛选列表
        let selectionList=[[],[],[],[]];
        //筛选列表
        const {authTreeOfOne}=this.state;
        let url='';
        if(authTreeOfOne['/channel/findonesource']){
            url=`${config.juseLittleTool}/channel/findonesource`
        }
        if(root||(authTreeOfOne['/channel/findsource'])){
            url=`${config.juseLittleTool}/channel/findsource`
        }
        $.ajax({
            url: url,
            type: "post",
            async: true,
            headers: {
                'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
            },
            //data:{ user:sessionStorage.getItem('token'),},
            success: data => {
                console.log(data);
                if (data.code === 200) {
                    const List = data.data;
                    if (List.length > 0) {
                        List.forEach((ele, i) => {
                            if(ele.product){
                                selectionList[0].push(ele.product);  //产品
                            }
                            if(ele.umbrellaname){
                                selectionList[1].push(ele.umbrellaname);//平台
                            }
                            if(ele.channelname){
                                selectionList[2].push(ele.channelname);//账户名
                            }
                            if(ele.personincharge){
                                selectionList[3].push(ele.personincharge);//负责人
                            }
                        });
                        this.setState({
                            selectionList:[noRepeat(selectionList[0]),noRepeat(selectionList[1]),noRepeat(selectionList[2]),noRepeat(selectionList[3]),]
                        },()=>{
                            console.log(this.state.selectionList);
                            const{selectionList}=this.state;
                            this.setState({
                                matchProducts: selectionList[0],//产品自动完成列表
                                matchProducts1:selectionList[1],//平台自动完成列表
                            })

                        })
                    }

                }
            }
        });
        //时间初始化
        let dateStr=getFormatDate(new Date());
        this.setState({
            dateStr:[dateStr,dateStr],
            date:[moment(dateStr),moment(dateStr)],
        });
        this.getBannerList(200,1,dateStr,dateStr);
    }
    //生日禁用
    disabledDate(val) {
        if (val) {
            return val.valueOf() > Date.now();
        } else {
            return false;
        }
    }
    //banner详细信息对话框（新增/编辑）
    showBannerModal(values,state) {
        //state  1:查看   2:编辑  3:退款
        if(state){
            if(state===1){
                this.setState({
                    isLooking:true,
                    isEdit:false,
                    record:values,
                    isRefund:false,
                },()=>{
                    this.props.form.setFieldsValue({
                        refundmoney:values.refundmoney,//退款
                        // channelstate:values.channelstate,//状态
                    });
                })
            }else if(state===2){
                this.setState({
                    isLooking:false,
                    isEdit:true,
                    record:values,
                    isRefund:false,
                });
                // this.getCreatNewData(values.product, values.umbrellaname,);
            }else if(state===3){
                this.setState({
                    isLooking:true,
                    isEdit:false,
                    isRefund:true,
                    record:values,
                })
            }
        }else{
            this.setState({
                isLooking:false,
                isEdit:false,
                isRefund:false,
                record:{},
            })
        }
        if(values){
            this.props.form.setFieldsValue({
                product :values.product,//产品
                umbrellaname : values.umbrellaname,//平台
                channelname : values.channelname,//账户名称
                phone : values.phone,//联系电话
                aboutname : values.aboutname,//平台联系人
                company : values.company,//公司名称
                personincharge : values.personincharge,//责任人
                yesterdayrecharge:values.yesterdayrecharge,//上次充值金额
                rechargesum:values.rechargesum,//充值总额
                consumptionmoney:values.consumptionmoney,//消费金额
                coillnsum:values.coillnsum,//总进线
                coiloutsum:values.coiloutsum,//总推线
                communication:values.communication,//总沟通数
                ordersum:values.ordersum,//总成单数
                issueratio:values.issueratio,//平台出单率
                ordersummoney:values.ordersummoney,//总成单金额
                totalvalueofoutput:values.totalvalueofoutput,//总产值
                recyclesum:values.recyclesum,//复购总值
                balance:values.balance,//余额
                // refundmoney:values.refundmoney,//退款
                averagelinecost:values.averagelinecost==='NaN'?0:values.averagelinecost,
                outputratio:values.outputratio==='NaN'?0:values.outputratio,//产出比
                channelstate:values.channelstate,//状态
                createtime:values.createtime?moment(values.createtime):undefined,
            });
            this.setState({
                allSpentMoney:values.consumptionmoney?values.consumptionmoney:0,//总消费金额
                allInputLines:values.coillnsum?values.coillnsum:0,//总进线
                allOutput:values.totalvalueofoutput?values.totalvalueofoutput:0,//总产值
                lastTImeMoney:values.yesterdayrecharge?values.yesterdayrecharge:0,//上次充值金额
                inputAllMoney:values.rechargesum?values.rechargesum:0,//充值总额
                allCharge:values.ordersummoney?values.ordersummoney:0,//总成单金额
                allOutput:values.ordersummoney?values.ordersummoney:0,//总成单金额
                againBoughtMoney:values.recyclesum?values.recyclesum:0,//其中复购总值
                moneyLeft:values.balance?values.balance:0,//余额
                allBillCount:values.ordersum?values.ordersum:0,//总成单数
            });
            this.setState({
                visible: true,
                BannerId: values.id,
            });
        }else{
            this.setState({
                visible: true,
                BannerId:undefined
            });

        }
    }
    //取消，关闭对话框
    handleCancel() {
        this.props.form.resetFields();
        this.setState({
            visible: false,
        });
        this.setState({
            allSpentMoney:0,//总消费金额
            allInputLines:0,//总进线
            allOutput:0,//总产值
            lastTImeMoney:0,//上次充值金额
            inputAllMoney:0,//充值总额
            allCharge:0,//总成单金额
            againBoughtMoney:0,//其中复购总值
            moneyLeft:0,//余额
            allBillCount:0,//总成单数
        });
    }
    //保存
    saveBanner() {
        if(this.state.isLooking&&!this.state.isRefund){
            this.setState({
                visible: false,
            });
            this.props.form.resetFields();
            return;
        }
        this.props.form.validateFields((err, values)=>{
            if(!err){
                if(values.refundmoney>values.rechargesum){
                    message.error('退费金额必须小于充值总额！',2);
                    return;
                }
                if(this.state.isRefund && values.refundmoney ){
                    const {authTreeOfOne}=this.state;
                    let refundimg=[];
                    if(values.Filedata){
                        values.Filedata.forEach(item=>{
                            refundimg.push(item.response ? item.response.name : item.name);
                        })
                    }
                    let  url1=`${config.juseLittleTool}/channel/refundsave`;
                    if(authTreeOfOne['/channel/refundsave']){
                        url1=`${config.juseLittleTool}/channel/refundsave`
                    }
                    if(root||(authTreeOfOne['/channel/executiverefundstate'])){
                        url1=`${config.juseLittleTool}/channel/executiverefundstate`;//发起退费
                    }
                    $.ajax({
                        url: url1,
                        type: "post",
                        async: true,
                        headers: {
                            'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
                        },
                        data:{
                            channelstate:'3',
                            refundmoney:values.refundmoney,
                            id:this.state.record.id,
                            //user:sessionStorage.getItem('token'),
                            refundimg:JSON.stringify(refundimg),//图片路径
                        },
                        success: data => {
                            console.log(data);
                            if(data.code === 200){
                                this.setState({
                                    visible: false,
                                },()=>{
                                    const { pagesize,pageindex,dateStr, date,selectedApplyState, selectedProduct,selectedUmbrellaName,applyPeopleName}=this.state;
                                    this.getBannerList(pagesize*100,pageindex,dateStr[0],dateStr[1],selectedProduct,selectedUmbrellaName,selectedApplyState,applyPeopleName);
                                });
                                this.props.form.resetFields();
                            }else{
                                Modal.warning({
                                    title: '修改失败',
                                    content: `${data.mes}请返回重新操作`,
                                });
                            }
                        }
                    });
                    return;
                }
                console.log(values);
                let state=values.channelstate;
                if(values.refundmoney>0) {
                    state = '3';
                }
                const {BannerId} = this.state;
                let url,
                    data={
                        channelstate:state,//状态
                        product :values.product,//产品
                        umbrellaname : values.umbrellaname,//平台
                        channelname : values.channelname,//账户名称
                        phone : values.phone,//联系电话
                        aboutname : values.aboutname,//平台联系人
                        company : values.company,//公司名称
                        personincharge : values.personincharge,//责任人
                        yesterdayrecharge:values.yesterdayrecharge,//上次充值金额
                        rechargesum:values.rechargesum,//充值总额
                        consumptionmoney:values.consumptionmoney,//消费金额
                        coillnsum:values.coillnsum,//总进线
                        coiloutsum:values.coiloutsum,//总推线
                        communication:values.communication,//总沟通数
                        ordersum:values.ordersum,//总成单数
                        issueratio:values.issueratio,//平台出单率
                        ordersummoney:values.ordersummoney,//总成单金额
                        totalvalueofoutput:values.totalvalueofoutput,//总产值
                        recyclesum:values.recyclesum,//复购总值
                        balance:values.balance,//余额
                        refundmoney:values.refundmoney,//退款
                        createtime:values.createtime?values.createtime.format('YYYY-MM-DD'):getFormatDate(new Date()),
                    };
                if(BannerId){
                    url = `${config.juseLittleTool}/channel/update`;
                    data.id = BannerId;
                }else{
                    url = `${config.juseLittleTool}/channel/save`;
                }
                $.ajax({
                    url: url,
                    type: "post",
                    async: true,
                    headers: {
                        'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
                    },
                    data:data,
                    success: data => {
                        console.log(data);
                        if(data.code === 200){
                            this.setState({
                                visible: false,
                            },()=>{
                                const { pagesize,pageindex,dateStr, date,selectedApplyState, selectedProduct,selectedUmbrellaName,applyPeopleName}=this.state;
                                this.getBannerList(pagesize*100,pageindex,dateStr[0],dateStr[1],selectedProduct,selectedUmbrellaName,selectedApplyState,applyPeopleName);
                            });
                            this.props.form.resetFields();
                        }else{
                            if(data.code===201){
                                this.props.form.setFields({
                                    channelname: { value: values.channelname,errors: [new Error(data.mes)] }
                                });
                            }
                            Modal.warning({
                                title: '保存失败',
                                content: `${data.mes}请返回重新操作`,
                            });
                        }
                    }
                });
            }else{
                message.error(`请填写必要的信息，再提交`, 2);
            }
        })
    }
    //获取申请列表  starttime, endtime, product（产品）, umbrellaname（平台）, state, people（负责人）, pagesize, pageindex
    getBannerList(pagesize,pageindex,starttime, endtime,product,umbrellaname,state,people,isLoadMore) {
        const{authTreeOfOne}=this.state;
        let url='';
        if(authTreeOfOne['/channel/findonelistnotpaging']){
            url=`${config.juseLittleTool}/channel/findonelistnotpaging`
        }
        if(root||(authTreeOfOne['/channel/findlistnotpaging'])){
            url=`${config.juseLittleTool}/channel/findlistnotpaging`
        }
        $.ajax({
            url: url,
            type: "post",
            async: true,
            headers: {
                'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
            },
            data:{
                pagesize,
                pageindex,
                starttime,
                endtime,
                state,//申请状态
                product,//产品
                umbrellaname,//平台
                people,//负责人
                //user:sessionStorage.getItem('token'),
            },
            success: data => {
                console.log(data);
                if (data.code === 200) {
                    let channelList = data.data.rows;
                    this.setState({
                        originChannelList:(data.data.rows).concat(this.state.originChannelList),
                    });
                    if(isLoadMore===true){
                        console.log(channelList);
                        console.log(this.state.originChannelList);
                        channelList=JSON.parse(JSON.stringify(this.state.originChannelList));
                        console.log(channelList);
                    }
                    let rechargesum=0;//充值总额
                    let consumptionmoney=0;//消费金额
                    let coillnsum=0;//总进线
                    let averagelinecost=0;//平均进线成本
                    let ordersummoney=0;//总成单金额
                    let totalvalueofoutput=0;//总产值
                    let recyclesum=0;//复购总值
                    let balance=0;//余额
                    let index=0;
                    let channelList1=[];
                    let channelList2=[];
                    let ele1={};
                    //最后改需求
                    let newArr = [];
                    let hash = [];
                    if (channelList.length > 0) {
                        channelList.forEach((ele, i) => {
                            ele.test1=ele.averagelinecost;
                            ele.test2=ele.outputratio;
                            let key =  ele.product +  'a' +  ele.umbrellaname;
                            if(!hash[key]){
                                hash[key] = key;
                                newArr.push({
                                    product: ele.product,
                                    umbrellaname: ele.umbrellaname,
                                    consumptionmoney1:0,
                                    coillnsum1:0,
                                    ordersummoney1:0,
                                });
                                newArr[(newArr.length-1)].consumptionmoney1+=Number(ele.consumptionmoney);
                                newArr[(newArr.length-1)].coillnsum1+=Number(ele.coillnsum);
                                newArr[(newArr.length-1)].ordersummoney1+=Number(ele.ordersummoney);
                            }else{
                                let m = Object.keys(hash).indexOf(key);
                                newArr[m].consumptionmoney1+=ele.consumptionmoney*1;
                                newArr[m].coillnsum1+=ele.coillnsum*1;
                                newArr[m].ordersummoney1+=ele.ordersummoney*1;
                            }
                            ele.index = i + 1;
                            channelList1.push(ele);
                            if(ele.refundmoney>0){
                                console.log(ele);
                                ele1=JSON.parse(JSON.stringify(ele));
                                ele1.index = i + 1.1;
                                ele1.myState=true;
                                channelList1.push(ele1);
                                rechargesum-=ele.refundmoney*1;//充值总额
                            }
                            rechargesum+=ele.rechargesum*1;//充值总额
                            consumptionmoney+=ele.consumptionmoney*1;//消费金额
                            coillnsum+=ele.coillnsum*1;//总进线
                            averagelinecost+=ele.averagelinecost*1;//平均进线成本
                            ordersummoney+=ele.ordersummoney*1;//总成单金额
                            totalvalueofoutput+=ele.totalvalueofoutput*1;//总产值
                            recyclesum+=ele.recyclesum*1;//复购总值
                            balance+=ele.balance*1;//余额
                            index=i+2;
                        });
                        let name123="";
                        let myResult123=0;//平均进线成本
                        let myResult1234=0;//产出比
                        newArr.forEach(item=>{
                            name123=item.product +  'a' +  item.umbrellaname;
                            myResult123=Math.round(item.consumptionmoney1/(item.coillnsum1?item.coillnsum1:1));
                            myResult1234=(item.ordersummoney1/(item.consumptionmoney1?item.consumptionmoney1:1)).toFixed(2);
                            channelList.forEach(ele=>{
                                if( (ele.product +  'a' +  ele.umbrellaname)==name123){
                                    ele.test1=myResult123;
                                    ele.test2=myResult1234;
                                }
                            })
                        });
                        console.log(index);
                        channelList2.push({index:index,createtime:'总计',rechargesum:rechargesum.toFixed(2),
                            consumptionmoney:consumptionmoney.toFixed(2),coillnsum:coillnsum,
                            averagelinecost:(consumptionmoney>0&&coillnsum>0)?Math.round(consumptionmoney/coillnsum):0,ordersummoney:ordersummoney.toFixed(2),
                            totalvalueofoutput:totalvalueofoutput.toFixed(2),recyclesum:recyclesum.toFixed(2),balance:balance.toFixed(2)})
                        console.log(this.state.allAreRefund);
                        if(this.state.allAreRefund){
                            channelList1=channelList1.filter(key=>key.myState===true)
                        }
                        this.setState({
                            channelList:channelList1,
                            channelList2,
                            channelcount: data.data.count,
                        },()=>{
                            console.log(this.state.channelList);
                            console.log(this.state.channelList2);
                        });
                    }else{
                        this.setState({
                            channelList:[],
                            channelcount: 0,
                        });
                    }
                } else {
                    message.error(`${data.mes} 请返回重新操作`, 2);
                }
            }
        });
    }
    //筛选方法
    handleApplyState(state,value){
        let allAreRefund=false;
        const { dateStr, selectedApplyState, selectedProduct,selectedUmbrellaName,applyPeopleName}=this.state;
        if(state===1){
            this.setState({
                selectedProduct:value,
                pagesize:2
            })
            this.getBannerList(200,1,dateStr[0],dateStr[1],value,selectedUmbrellaName,selectedApplyState,applyPeopleName);
        }else if(state===2){
            this.setState({
                selectedUmbrellaName:value,
                pagesize:2
            })
            this.getBannerList(200,1,dateStr[0],dateStr[1],selectedProduct,value,selectedApplyState,applyPeopleName);
        }else if(state===3){
            if(value==6){
                allAreRefund=true;
            }
            this.setState({
                selectedApplyState:value=='6'?'4':value,
                pagesize:2
            })
            this.getBannerList(200,1,dateStr[0],dateStr[1],selectedProduct,selectedUmbrellaName,value=='6'?'4':value,applyPeopleName);
        }else{
            this.setState({
                applyPeopleName:value,
                pagesize:2
            })
            this.getBannerList(200,1,dateStr[0],dateStr[1],selectedProduct,selectedUmbrellaName,selectedApplyState,value);
        }
        this.setState({
            allAreRefund:allAreRefund,
        })
    }
    //日期筛选方法
    changeDate(date, dateStr) {
        this.setState({
            dateStr,
            date,
        });
        const { selectedApplyState, selectedProduct,selectedUmbrellaName,applyPeopleName}=this.state;
        this.getBannerList(200,1,dateStr[0],dateStr[1],selectedProduct,selectedUmbrellaName,selectedApplyState,applyPeopleName);
    }
    //筛选查询
    doSearch(){
        const { dateStr, selectedApplyState, selectedProduct,selectedUmbrellaName,applyPeopleName}=this.state;
        this.getBannerList(200,1,dateStr[0],dateStr[1],selectedProduct,selectedUmbrellaName,selectedApplyState,applyPeopleName);
    }
    //刷新
    reloadByHand(){
        this.doSearch();
    }
    //只是为了计算总值
    justGetInputValue(state,value){
        // console.log(value);
        //只是为了计算总值
        switch(state){
            case 1://上次充值金额
                this.setState({
                    lastTImeMoney:value?value:0,
                });
                break;
            case 2://充值总额
                this.setState({
                    inputAllMoney:value?value:0,
                });
                break;
            case 3://总成单金额
                this.setState({
                    allCharge:value?value:0,
                });
                break;
            case 4://其中复购总值
                this.setState({
                    againBoughtMoney:value?value:0,
                });
                break;
            case 5://余额
                this.setState({
                    moneyLeft:value?value:0,
                });
                break;
            default:
                break;
        }

    }

    // //新增数据时获取当天所有相同产品和平台的总消费，总产值，总进线
    // getCreatNewData(product,umbrellaname){
    //     let dateStr=getFormatDate(new Date());
    //     $.ajax({
    //         url: `${config.juseLittleTool}/channel/findsum`,
    //         type: "post",
    //         async: true,
    //         headers: {
    //             'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
    //         },
    //         data:{
    //             starttime:dateStr,
    //             endtime:dateStr,
    //             product,
    //             umbrellaname
    //         },
    //         success: data => {
    //             console.log(data);
    //             if (data.code === 200) {
    //                 this.setState({
    //                     allCreateData:data.data,
    //                 })
    //             }
    //         }
    //     });
    // }
    //请输入消费金额变化方法
    handleAllSpentMoney(state,value){
        // this.getCreatNewData();
        let countValue=()=>{
            let{allSpentMoney,allInputLines,allOutput,allCreateData,allBillCount}=this.state;
            // allSpentMoney=allCreateData[0]?(allCreateData[0].consumptionmoney-0+allSpentMoney):allSpentMoney;
            if(allSpentMoney>0&&allInputLines>0){
                    // allInputLines=allCreateData[0]?(allCreateData[0].coillnsum-0+allInputLines):allInputLines;
                    this.props.form.setFieldsValue({
                        averagelinecost:Math.round(isNaN(allSpentMoney/allInputLines)?0:allSpentMoney/allInputLines),
                    })
            }else{
                this.props.form.setFieldsValue({
                    averagelinecost:0,
                })
            }
            if(allSpentMoney>0&&allOutput>0){
                    // allOutput=allCreateData[0]?allCreateData[0].totalvalueofoutput-0+allOutput:allOutput;
                    this.props.form.setFieldsValue({
                        outputratio:isNaN(allOutput/allSpentMoney)?(0):((allOutput/allSpentMoney).toFixed(2)),
                    })

            }else{
                this.props.form.setFieldsValue({
                    outputratio:0,
                })
            }
            if(allInputLines>0&&allBillCount>0){
                this.props.form.setFieldsValue({
                    issueratio:Number((isNaN(allBillCount/allInputLines)?0:((allBillCount/allInputLines)*100)).toFixed(2))
                })
            }else{
                this.props.form.setFieldsValue({
                    issueratio:0,
                })
            }
        };
        switch(state){
            case 1://消费金额
                this.setState({
                    allSpentMoney:value?value:0,
                },()=>{
                    countValue();
                });
                break;
            case 2://总进线
                this.setState({
                    allInputLines:value?value:0,
                },()=>{
                    countValue();
                });
                break;
            case 3://总成单金额
                this.setState({
                    allOutput:value?value:0,
                },()=>{
                    countValue();
                });
                break;
            case 4://总成单数
                this.setState({
                    allBillCount:value?value:0,
                },()=>{
                    countValue();
                });
                break;
            default:
                break;
        }


    }
    //打印
    handlePrint(){
        this.printpage();
    }
    printpage() {
        var newstr = `
              <table class="" >
              <caption>数据管理列表</caption>
      <thead>
        <tr>
          <td>创建时间</td>
          <td>产品</td>
          <td>品台</td>
          <td>账户名</td>
          <td>充值总额</td>
          <td>消费金额</td>
          <td>状态</td>
          <td>总进线</td>
          <td>平均进线成本</td>
          <td>总成单金额</td>
          <td>产出比值</td>
          <td>总产值</td>
          <td>其中复购总值</td>
          <td>余额</td>
          <td>负责人</td>
        </tr>
      </thead>
      <tbody>`;
        newstr += this.printHtml();
        newstr += `</tbody></table>`;
        let wind = window.open("", "newWindow");
        let styleNode=document.createElement('style');
        styleNode.innerHTML=`	table{
        border-collapse: collapse;
        width:100%;
        font-size:12px;
      }
      td {
        text-align:center;
        border: 1px solid #ddd;
      }`;
        wind.document.getElementsByTagName('head')[0].appendChild(styleNode);
        wind.document.body.innerHTML = newstr;
        wind.print();

    }
    printHtml() {
        let str = '';
        let rechargesum=0;//充值总额
        let consumptionmoney=0;//消费金额
        let coillnsum=0;//总进线
        let averagelinecost=0;//平均进线成本
        let ordersummoney=0;//总成单金额
        let totalvalueofoutput=0;//总产值
        let recyclesum=0;//复购总值
        let balance=0;//余额
        let rows=[];
        if(this.state.selectedRows.length>0){
            rows=this.state.selectedRows;
        }else{
            rows=this.state.channelList;
        }
        rows.map(item => {
            if(!item.myState){
                rechargesum+=item.rechargesum*1;//充值总额
                consumptionmoney+=item.consumptionmoney*1;//消费金额
                coillnsum+=item.coillnsum*1;//总进线
                averagelinecost+=item.averagelinecost*1;//平均进线成本
                ordersummoney+=item.ordersummoney*1;//总成单金额
                totalvalueofoutput+=item.totalvalueofoutput*1;//总产值
                recyclesum+=item.recyclesum*1;//复购总值
                balance+=item.balance*1;//余额
            }else{
                rechargesum-=item.refundmoney*1;//消费金额
            }
            str += `<tr>
                <td>${item.createtime}</td>
                <td>${item.product==undefined?'':item.product}</td>
                <td>${item.umbrellaname==undefined?'':item.umbrellaname}</td>
                <td>${item.channelname==undefined?'':item.channelname}</td>
                <td>${item.myState?('-'+item.refundmoney):item.rechargesum==null?'':item.rechargesum}</td>
                <td>${item.myState?'':item.consumptionmoney==null?'':item.consumptionmoney}</td>
                <td>${item.myState?'退费':item.channelstate == 1 ? '正常' : item.channelstate == 2 ? '滞留' : item.channelstate == 3 ? '退款审核中' : item.channelstate == 4 ? '退款通过' : item.channelstate == 5 ? '退款驳回' : ''}</td>
                <td>${item.myState?'':item.coillnsum==null?'':item.coillnsum}</td>
                <td>${item.myState?'':(item.averagelinecost=='NaN'||isNaN(item.averagelinecost))?'':item.averagelinecost}</td>
                <td>${item.myState?'':item.ordersummoney==null?'':item.ordersummoney}</td>
                <td>${item.myState?'':item.outputratio==='NaN'||item.outputratio==undefined?'':item.outputratio}</td>
                <td>${item.myState?'':item.totalvalueofoutput==null?'':item.totalvalueofoutput}</td>
                <td>${item.myState?'':item.recyclesum==null?'':item.recyclesum}</td>
                <td>${item.myState?'':item.balance==null?'':item.balance}</td>
                <td>${item.personincharge==undefined?'':item.personincharge}</td>
            </tr>`;
        });
        str += `<tr>
                <td>总计</td>
                <td></td>
                <td></td>
                <td></td>
                <td>${rechargesum==null?'':rechargesum.toFixed(2)}</td>
                <td>${consumptionmoney==null?'':consumptionmoney.toFixed(2)}</td>
                <td></td>
                <td>${coillnsum==null?'':coillnsum}</td>
                <td></td>
                <td>${ordersummoney==null?'':ordersummoney.toFixed(2)}</td>
                <td></td>
                <td>${totalvalueofoutput==null?'':totalvalueofoutput.toFixed(2)}</td>
                <td>${recyclesum==null?'':recyclesum.toFixed(2)}</td>
                <td>${balance==null?'':balance.toFixed(2)}</td>
                <td></td>
            </tr>`;
        return str;
    }
    //打印单张
    handlePrint1(){
        this.printpage1();
    }
    printpage1() {
        let newstr = `
              <table class="" >
              <caption>数据渠道详情</caption>
      <tbody>`;
        newstr += this.printHtml1();
        newstr += `</tbody></table>`;
        let wind = window.open("", "newWindow");
        let styleNode=document.createElement('style');
        styleNode.innerHTML=`	table{
        border-collapse: collapse;
        width:100%;
        font-size:16px;
      }
      td {
        text-align:left;
        border: 1px solid #ddd;
      }`;
        wind.document.getElementsByTagName('head')[0].appendChild(styleNode);
        wind.document.body.innerHTML = newstr;
        wind.print();
    }
    printHtml1() {
        const{allSpentMoney,allInputLines,visible,  isLooking, isEdit,record,isRefund,selectionList}=this.state;
        let str = '';
        str += `<tr>
                <td>平台</td>
                <td>${record.umbrellaname==undefined?'':record.umbrellaname}</td>
                <td></td>
                <td>账户名</td>
                <td>${record.channelname==undefined?'':record.channelname}</td>
                <td></td>
            </tr>`;
        str += `<tr>
                <td>产品</td>
                <td>${record.product==undefined?'':record.product}</td>
                <td></td>
                <td>公司</td>
                <td>${record.company==undefined?'':record.company}</td>
                <td></td>
            </tr>`;
        str += `<tr>
                <td>退费金额</td>
                <td>${record.refundmoney==undefined?'':record.refundmoney}</td>
                <td></td>
                <td>状态</td>
                <td>${record.channelstate==1?'正常':record.channelstate =='2'?'滞留': record.channelstate=='3'?'退款审核中':record.channelstate =='4'?'退款通过': record.channelstate =='5'?'退款驳回':''}</td>
                <td></td>
            </tr>`;
        str += `<tr>
                <td>姓名</td>
                <td>${record.aboutname==undefined?'':record.aboutname}</td>
                <td></td>
                <td>联系方式</td>
                <td>${record.phone==undefined?'':record.phone}</td>
                <td></td>
            </tr>`;
        str += `<tr>
                 <td>负责人</td>
                <td>${record.personincharge==undefined?'':record.personincharge}</td>
                <td></td>
                <td>上次充值金额</td>
                <td>${record.yesterdayrecharge==undefined?'':record.yesterdayrecharge}</td>
                <td>${convertCurrency(isNaN(this.state.lastTImeMoney)?0:this.state.lastTImeMoney)}</td>
            </tr>`;
        str += `<tr>
                 <td>充值总额</td>
                <td>${record.rechargesum==undefined?'':record.rechargesum}</td>
                <td>${convertCurrency(isNaN(this.state.inputAllMoney)?0:this.state.inputAllMoney)}</td>
                <td>消费金额</td>
                <td>${record.consumptionmoney==undefined?'':record.consumptionmoney}</td>
                <td>${convertCurrency(isNaN(this.state.allSpentMoney)?0:this.state.allSpentMoney)}</td>
            </tr>`;
        str += `<tr>
                 <td>总进线</td>
                <td>${record.coillnsum==undefined?'':record.coillnsum}</td>
                <td></td>
                <td>平均进线成本</td>
                <td>${(record.averagelinecost==undefined||isNaN(record.averagelinecost))?0:record.averagelinecost}</td>
                <td>${convertCurrency((record.averagelinecost==undefined||isNaN(record.averagelinecost))?0:record.averagelinecost)}</td>
            </tr>`;
        str += `<tr>
                 <td>总推线</td>
                <td>${record.coiloutsum==undefined?'':record.coiloutsum}</td>
                <td></td>
                <td>总沟通数</td>
                <td>${record.communication==undefined?'':record.communication}</td>
                <td></td>
            </tr>`;
        str += `<tr>
                 <td>总成单数</td>
                <td>${record.ordersum==undefined?'':record.ordersum}</td>
                <td></td>
                <td>平台出单率</td>
                <td>${record.issueratio==undefined?0:record.issueratio}%</td>
                <td></td>
            </tr>`;
        str += `<tr>
                 <td>总成单金额</td>
                <td>${record.ordersummoney==undefined?'':record.ordersummoney}</td>
                <td>${convertCurrency(isNaN(this.state.allCharge)?0:this.state.allCharge)}</td>
                <td>产出比</td>
                <td>${(record.outputratio==='NaN'||record.outputratio=='Infinity')?'0.00':record.outputratio}</td>
                <td></td>
            </tr>`;
        str += `<tr>
                 <td>总产值</td>
                <td>${record.totalvalueofoutput==undefined?'':record.totalvalueofoutput}</td>
                <td>${convertCurrency(isNaN(this.state.allOutput)?0:this.state.allOutput)}</td>
                <td>其中复购总值</td>
                <td>${record.recyclesum==='NaN'?0:record.recyclesum}</td>
                <td>${convertCurrency(isNaN(this.state.againBoughtMoney)?0:this.state.againBoughtMoney)}</td>
            </tr>`;
        str += `<tr>
                 <td>余额</td>
                <td>${record.balance==undefined?'':record.balance}</td>
                <td>${convertCurrency(isNaN(this.state.moneyLeft)?0:this.state.moneyLeft)}</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>`;
        return str;
    }
    jumpPage(val) {
        this.setState({
            pageNum: val
        });
    }
    //自动完成方法
    handleSearchMatchProducts(value){
        let {selectionList}=this.state;
        let projectNames = [];
        if(selectionList[0].length){
            selectionList[0].forEach(item=>{
                if(item.includes(value)){
                    projectNames.push(item);
                }
            });
        }
        this.setState({matchProducts:projectNames});
    }
    //自动完成方法
    handleSearchMatchProducts1(value){
        let {selectionList}=this.state;
        let projectNames = [];
        if(selectionList[1].length){
            selectionList[1].forEach(item=>{
                if(item.includes(value)){
                    projectNames.push(item);
                }
            });
        }
        this.setState({matchProducts1:projectNames});
    }
    //获得产品或平台输入的值
    handleOnChange(value){
        console.log(value);
        this.setState({
            selectValue:value,
        })
    }
    handleOnChange1(value){
        console.log(value);
        this.setState({
            selectValue1:value,
        })
    }
    // //失去焦点
    // handleBlue(){
    //     const {selectValue,selectValue1}=this.state;
    //     if(selectValue&&selectValue1){
    //         // this.getCreatNewData(selectValue,selectValue1);
    //     }
    //
    // }
    //导出
    downList() {
        console.log(this.state.selectedRows);
        console.log(this.state.selectedRows.filter(key=>(!key.myState)));
        const { dateStr, date,selectedApplyState, selectedProduct,selectedUmbrellaName,applyPeopleName}=this.state;
        let url=`${config.juseLittleTool}/channel/downloadExcel `;
        let para;
        if(this.state.selectedRows.length>0){
            para={
                datasource:JSON.stringify(this.state.selectedRows.filter(key=>key.myState==undefined)),
            }
        }else{
            para={
                starttime:dateStr[0],
                endtime:dateStr[1],
                state:selectedApplyState,//申请状态
                product:selectedProduct,//产品
                umbrellaname:selectedUmbrellaName,//平台
                people:applyPeopleName,//负责人
            };
        }
        $.ajax({
            url:url,
            type: "post",
            headers: { Authorization: 'Bearer '+sessionStorage.getItem('token')},
            data:para,
            async: true,
            success: (data)=> {
                console.log(data);
                if(data.code===200){
                    window.location=`${config.juseLittleTool}/channel/download?name=`+data.downloadExcel;
                }
            }
        });
    }
    //验证账户名是否重复
    handleNameDuplicate(value){
        let data={ channelname:value};
        $.ajax({
            url: `${config.juseLittleTool}/channel/nameverification`,
            type: "post",
            async: true,
            headers: {
                'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
            },
            data,
            success: data => {
                console.log(data);
                if (data.code === 201) {
                    this.props.form.setFields({
                        channelname: { value: value,errors: [new Error(data.mes)] }
                    });
                }
            }
        });
    }
    //预览图片对话框
    previewImg(file){
        this.setState({
            previewImage: file.url || file.thumbUrl,
            previewVisible: true,
        });
    }
    //关闭预览图片对话框
    cancelPreview(){
        this.setState({ previewVisible: false })
    }
    //上传图片
    normFile(e) {
        this.setState({
            fileList: e.fileList
        });
        if (Array.isArray(e)) {
            return e;
        }
        return e && e.fileList;
    };
    //限制用户必须上传图片格式的文件、图片大小
    beforeUpload(file, fileList) {
        let isIMG = file.type.indexOf('image') != -1;
        if (!isIMG) {
            message.config({ top: 50 });
            message.error('您只能上传图片！');
        }
        // let isLt10M = file.size / 1024 / 1024 < 10;
        // if (!isLt10M) {
        //     message.config({ top: 50 });
        //     message.error('您上传的图片大小必须小于10MB！');
        // }
        // return isIMG && isLt10M;
        return isIMG ;
    }
    //加载更多
    loadMore(){
        const {pagesize,channelcount, dateStr, date,selectedApplyState, selectedProduct,selectedUmbrellaName,applyPeopleName}=this.state;
        if(pagesize<(channelcount/100)){
            this.getBannerList(100,(pagesize+1),dateStr[0],dateStr[1],selectedProduct,selectedUmbrellaName,selectedApplyState,applyPeopleName,true);
            this.setState({
                pagesize:pagesize+1,
            })
        }
    }
    render() {
        //费用预览表格
        const{channelList,channelList2,inputAllMoney,fileList,previewVisible,previewImage,pagesize,channelcount}=this.state;
        const data = [
            {
                title: '创建时间',
                dataIndex: 'createtime',
                width: 170,
                render:(text,record)=><span style={{color:record.myState?'red':''}}>{text.split(' ')[0]}</span>
            },{
                title: '产品',
                dataIndex: 'product',
                width: 120,
                render:(text,record)=><span style={{color:record.myState?'red':''}}>{text}</span>
            },{
                title: '平台',
                dataIndex: 'umbrellaname',
                width: 120,
                render:(text,record)=><span style={{color:record.myState?'red':''}}>{text}</span>
            },{
                title: '账户名',
                dataIndex: 'channelname',
                width: 120,
                render:(text,record)=><span style={{color:record.myState?'red':''}}>{text}</span>
            },{
                title: '充值总额',
                dataIndex: 'rechargesum',
                width: 120,
                render:(text,record)=><span style={{color:record.myState?'red':''}}>{record.myState?('-'+record.refundmoney):text}</span>
            },{
                title: '消费金额',
                width: 100,
                dataIndex: 'consumptionmoney',
                render:(text,record)=><span >{record.myState?'':text}</span>
            }, {
                title: '状态',
                width: 100,
                dataIndex: 'channelstate',
                render: (text,record) => <span style={{color:record.myState?'red':''}}>{record.myState?'退费':(text==1?'正常':text==2?'滞留':text==3?'退款审核中':text==4?'退款通过':text==5?'退款驳回':'')}</span>
            } ,{
                title: '总进线',
                width: 100,
                dataIndex: 'coillnsum',
                render:(text,record)=><span >{record.myState?'':text}</span>
            },{
                title: '平均进线成本',
                width: 100,
                dataIndex: 'test1',
                render:(text,record)=><span>{record.myState?'':((text=='NaN'||isNaN(text)||text=="Infinity")?'':text)}</span>
            },{
                title: '总成单金额',
                width: 100,
                dataIndex: 'ordersummoney',
                render:(text,record)=><span >{record.myState?'':text}</span>
            },{
                title: '产出比值',
                width: 100,
                dataIndex: 'test2',
                render:(text,record)=><span>{record.myState?'':(text==='NaN'||text=="Infinity"?'':text)}</span>
            },{
                title: '总产值',
                width: 100,
                dataIndex: 'totalvalueofoutput',
                render:(text,record)=><span >{record.myState?'':text}</span>
            },
            {
                title: '其中复购总值',
                width: 100,
                dataIndex: 'recyclesum',
                render:(text,record)=><span >{record.myState?'':text}</span>
            },
            {
                title: '余额',
                width: 100,
                dataIndex: 'balance',
                render:(text,record)=><span >{record.myState?'':text}</span>
            },
            {
                title: '负责人',
                width: 100,
                dataIndex: 'personincharge',
            },{
                title: '操作',
                width: 220,
                render: (text, record) => (
                    <div>
                        {record.createtime==="总计"?'': <div>
                            <Button  onClick={this.showBannerModal.bind(this,record,1)}>查看</Button>
                            {(record.channelstate==3||record.channelstate==4||record.channelstate==5)?'':root||authTreeOfOne['/channel/update']?<Button  onClick={this.showBannerModal.bind(this,record,2)}>编辑</Button>:''}
                            {record.channelstate!=2?'':root||authTreeOfOne['/channel/refundsave']?<Button  type="danger" style={{marginTop:'10px'}} onClick={this.showBannerModal.bind(this,record,3)} >发起退费</Button>:''}
                        </div>}
                    </div>
                )
            }
        ];
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows,this.state.feePreviewData);
                this.setState({
                    selectedRows:selectedRows,
                });
            },
            getCheckboxProps: record => ({
                disabled: record.createtime ==='总计', // Column configuration not to be checked
            }),
        };
        const { getFieldDecorator, } =this.props.form;
            const formItemLayout = { labelCol: { span: 10 }, wrapperCol: { span: 14 }, };
        const{allSpentMoney,allInputLines,visible,  isLooking, isEdit,record,isRefund,selectionList,authTreeOfOne}=this.state;
        return (
            <div className='goods-label clearfix'>
                {/*面包屑*/}
                < Breadcrumb separator=">" >
                    <Breadcrumb.Item>橘色小工具</Breadcrumb.Item>
                    <Breadcrumb.Item>数据管理</Breadcrumb.Item>
                    <Breadcrumb.Item>数据列表</Breadcrumb.Item>
                </Breadcrumb >
                {/*筛选条*/}
                <div style={{marginTop:'40px'}} className="clearfix dataManage">
                    <Row>
                        <Col span={6}>
                            时间:&nbsp;&nbsp;&nbsp;
                            <RangePicker placeholder={['请选择日期', '请选择日期']}
                                         onChange={this.changeDate.bind(this)}
                                         format='YYYY-MM-DD'
                                         value={this.state.date}
                                         style={{width:'200px'}}
                                         disabledDate={(val) => this.disabledDate(val)}
                            />
                        </Col>
                        <Col span={4}>
                            产品:&nbsp;&nbsp;&nbsp;
                            <Select  style={{width:'120px'}} onChange={this.handleApplyState.bind(this,1)} defaultValue="">
                                <Option value='' >全部</Option>
                                {selectionList[0].map(item=><Option value={item} key={item}>{item}</Option>)}
                            </Select>
                        </Col>
                        <Col span={4}>
                            平台:&nbsp;&nbsp;&nbsp;
                            <Select  style={{width:'120px'}} onChange={this.handleApplyState.bind(this,2)} defaultValue="">
                                <Option value='' >全部</Option>
                                {selectionList[1].map(item=><Option value={item} key={item}>{item}</Option>)}
                            </Select>
                        </Col>
                        <Col span={4}>
                            状态:&nbsp;&nbsp;&nbsp;
                            <Select  style={{width:'120px'}} onChange={this.handleApplyState.bind(this,3)} defaultValue="">
                                <Option value='' >全部</Option>
                                <Option value='1'>正常</Option>
                                <Option value='2'>滞留</Option>
                                <Option value='3' >退款审核中</Option>
                                <Option value='4' >退款通过</Option>
                                {/*<Option value='5' >退款驳回</Option>*/}
                                <Option value='6'>退费</Option>
                            </Select>
                        </Col>
                        <Col span={4}>
                            负责人:&nbsp;&nbsp;&nbsp;
                            <Select  style={{width:'120px'}} onChange={this.handleApplyState.bind(this,4)} defaultValue="">
                                <Option value='' >全部</Option>
                                {selectionList[3].map(item=><Option value={item} key={item}>{item}</Option>)}
                            </Select>
                        </Col>
                        <Col span={2}>
                            <Button type="primary" onClick={this.doSearch.bind(this)}>查询</Button>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={7} >
                            {root||authTreeOfOne['/channel/save']?<Button type="primary"   onClick={() => this.showBannerModal()}>新增数据</Button>:''}
                            {root||authTreeOfOne['/channel/refundsave']?<Button  type="danger" style={{marginLeft:'10px'}}  onClick={() => { window.location.hash = '/allRefundList' }}>发起退费</Button>:''}
                        </Col>
                        <Col span={2} offset={13} >
                            <Button type="primary"  onClick={this.handlePrint.bind(this)}>打印</Button>
                        </Col>
                        <Col span={2} >
                            <Button type="primary"  onClick={this.downList.bind(this)}>导出Excel</Button>
                        </Col>
                    </Row>
                    <div  className='allgoods-table clearfix' style={{marginTop:'40px',}}>
                        <Table rowSelection={rowSelection}
                               rowKey="index"
                               columns={data}
                               dataSource={channelList}
                               pagination={false}
                               bordered
                        />
                    </div>
                        <div style={{position:'fixed',bottom:'0px',paddingRight:'30px',}}>
                            { channelList.length>1?
                                <table style={{ borderCollapse:'collapse',}} className="testTable">
                                    <tbody>
                                    <tr>
                                        <th style={{width:'3%'}}></th>
                                        <th style={{width:'3.96%'}}>充值总额</th>
                                        <th style={{width:'3.96%'}}>消费金额</th>
                                        <th style={{width:'3.96%'}}>总进线</th>
                                        <th style={{width:'3.96%'}}>总成单金额</th>
                                        <th style={{width:'3.96%'}}>总产值</th>
                                        <th style={{width:'3.96%'}}>其中复购总值</th>
                                        <th style={{width:'3.96%'}}>余额</th>
                                    </tr>
                                    <tr>
                                        <td style={{width:'3%'}}>总计</td>
                                        <td style={{width:'3.96%'}}>{channelList2[0].rechargesum}</td>
                                        <td style={{width:'3.96%'}}>{channelList2[0].consumptionmoney}</td>
                                        <td style={{width:'3.96%'}}>{channelList2[0].coillnsum}</td>
                                        <td style={{width:'3.96%'}}>{channelList2[0].ordersummoney}</td>
                                        <td style={{width:'3.96%'}}>{channelList2[0].totalvalueofoutput}</td>
                                        <td style={{width:'3.96%'}}>{channelList2[0].recyclesum}</td>
                                        <td style={{width:'3.96%'}}>{channelList2[0].balance}</td>
                                    </tr>
                                    </tbody>
                                </table> :''}
                        </div>
                </div>
                <Row style={{margin:'20px  0px 60px 0px'}} align="bottom">
                    <Col span={10} offset={10} >
                        {
                            this.state.channelcount == 0?
                                <p className="floor-ppagip">
                                    共{this.state.channelcount}条记录
                                </p> :
                                <p className="floor-ppagip">
                                    当前显示
                                    {isNaN(this.state.channelcount)?1:(this.state.channelcount===0?0:1)}—
                                    {100*this.state.pagesize < this.state.channelcount ? 100*this.state.pagesize : this.state.channelcount}条记录，
                                    共{this.state.channelcount}条记录 &nbsp;&nbsp;&nbsp;&nbsp;<Button  onClick={this.loadMore.bind(this)} disabled={pagesize>=(channelcount/100)}>加载更多</Button>
                                </p>
                        }
                    </Col>
                </Row>
                <Modal
                    className="little-tool-modal"
                    title={
                        <div>
                            {isRefund?'发起退费':(isLooking&&!isRefund)?'查看数据':isEdit?"编辑数据":'新增数据'}
                            {(isLooking&&!isRefund)?<Button style={{marginLeft:'1000px'}} onClick={this.handlePrint1.bind(this)}>打印</Button>:''}
                        </div>}
                    visible={visible}
                    footer={(isLooking&&!isRefund)?null: <div>
                        <Button  onClick={this.handleCancel.bind(this)}>取消</Button>
                        <Button type="primary" onClick={this.saveBanner.bind(this)}>确定</Button>
                    </div>}
                    okText="确定"
                    cancelText="取消"
                    // onOk={this.saveBanner.bind(this)}
                    onCancel={this.handleCancel.bind(this)}
                    maskClosable={false}
                >
                    <Form className="form-color">
                        <Row>
                            <Col span={7} >
                                <FormItem {...formItemLayout} label="产品"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('product', {
                                        rules: [{ required: true, message: '请输入产品名称' },
                                            { pattern: /^\S+$/, message: '请不要输入空格'}],
                                    })(
                                        <AutoComplete disabled={isEdit||isLooking}
                                                      dataSource={this.state.matchProducts}
                                                      onSearch={this.handleSearchMatchProducts.bind(this)}
                                                      placeholder="请输入产品名称"
                                                      onChange={this.handleOnChange.bind(this)}
                                                      // onBlur={this.handleBlue.bind(this)}
                                        />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={5} >
                                <FormItem {...formItemLayout} label="平台"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('umbrellaname', {
                                        rules: [{ required: true, message: '请输入平台' },
                                            { pattern: /^\S+$/, message: '请不要输入空格'}],
                                    })(
                                        <AutoComplete disabled={isEdit||isLooking}
                                                      dataSource={this.state.matchProducts1}
                                                      onSearch={this.handleSearchMatchProducts1.bind(this)}
                                                      placeholder="请输入平台"
                                                      onChange={this.handleOnChange1.bind(this)}
                                                      // onBlur={this.handleBlue.bind(this)}
                                        />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={7}>
                                <FormItem {...formItemLayout} label="账户名"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('channelname', {
                                        rules: [{ required: true, message: '请输入账户名' },
                                            { pattern: /^\S+$/, message: '请不要输入空格'}],
                                    })(
                                        <AutoComplete disabled={isEdit||isLooking}
                                                      placeholder="请输入账户名"
                                                      onBlur={this.handleNameDuplicate.bind(this)}
                                        />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={7} >
                                <FormItem {...formItemLayout} label="公司"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('company', {
                                        rules: [{ required: true, message: '请输入公司' },
                                            { pattern: /^\S+$/, message: '请不要输入空格'}],
                                    })(
                                        <Input placeholder="请输入公司" disabled={isEdit||isLooking}/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={7} offset={5}>
                                <FormItem {...formItemLayout} label="姓名"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('aboutname', {
                                        rules: [{ required: true, message: '请输入姓名' },
                                            { pattern: /^\S+$/, message: '请不要输入空格'}],
                                    })(
                                        <Input placeholder="请输入姓名" disabled={isEdit||isLooking}/>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={7} >
                                <FormItem {...formItemLayout} label="联系方式"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('phone', {
                                        rules: [
                                            { required: true, message: '请输入联系方式' },
                                            { pattern: /^(1[34578]\d{9})$/, message: '请输入正确的手机号' }
                                        ],
                                    })(
                                        <Input placeholder="请输入联系方式" disabled={isEdit||isLooking}/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={7} offset={5}>
                                <FormItem {...formItemLayout} label="负责人"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('personincharge', {
                                        rules: [{ required: true, message: '请输入负责人' },
                                            { pattern: /^\S+$/, message: '请不要输入空格'}],
                                    })(
                                        <Input placeholder="请输入负责人" disabled={isEdit||isLooking}/>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        {(isRefund||record.channelstate==3||record.channelstate==4||record.channelstate==5)?<Row>
                            <Col span={7} >
                                <FormItem {...formItemLayout} label="退费金额"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('refundmoney', {
                                        rules: [{ required: true, message: '请输入退费金额' },]
                                    })(
                                        <InputNumber  placeholder={"请输入退费金额"} disabled={isLooking&&!isRefund} style={{width:'100%'}} min={0} step={0.01} precision={2}/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={7} offset={7}>
                                <p style={{color: 'rgba(0, 0, 0, 0.85)',fontSize: '14px'}}> 状态:&nbsp;&nbsp;&nbsp;&nbsp;{record.channelstate==3?'退款审核中':record.channelstate==4?'退款通过':record.channelstate==2?'滞留':''}</p>
                            </Col>
                        </Row>:''}
                        <Row>
                            <Col span={7}>
                                <FormItem {...formItemLayout} label="上次充值金额"  style={{ minHeight: '60px', marginBottom: 0 ,}}>
                                    {getFieldDecorator('yesterdayrecharge', {
                                    })(
                                        <InputNumber onChange={this.justGetInputValue.bind(this,1)} placeholder={isLooking?'':"请输入上次充值金额"} disabled={isLooking} style={{width:'100%'}} min={0} step={0.01} precision={2}/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={4} className="clearfix">
                                <span  style={{ fontSize:'14px',float:'right' }}>{convertCurrency(isNaN(this.state.lastTImeMoney)?0:this.state.lastTImeMoney)}</span>
                            </Col>
                            <Col span={7} offset={1} >
                                <FormItem {...formItemLayout} label="充值总额"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('rechargesum', {

                                    })(
                                        <InputNumber placeholder={isLooking?'':"请输入充值总额"} disabled={isLooking} style={{width:'100%'}} min={0} step={0.01} precision={2} onChange={this.justGetInputValue.bind(this,2)}/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={4} className="clearfix">
                                <span  style={{ fontSize:'14px',float:'right' }}>{convertCurrency(isNaN(this.state.inputAllMoney)?0:this.state.inputAllMoney)}</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={7} >
                                <FormItem {...formItemLayout} label="消费金额"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('consumptionmoney', {

                                    })(
                                        <InputNumber placeholder={isLooking?'':"请输入消费金额"} disabled={isLooking} style={{width:'100%'}} min={0} step={0.01} precision={2} onChange={this.handleAllSpentMoney.bind(this,1)}/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={4} className="clearfix">
                                <span  style={{ fontSize:'14px',float:'right' }}>{convertCurrency(isNaN(this.state.allSpentMoney)?0:this.state.allSpentMoney)}</span>
                            </Col>
                            <Col span={7} offset={1}>
                                <FormItem {...formItemLayout} label="余额"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('balance', {

                                    })(
                                        <InputNumber  disabled={isLooking} placeholder={isLooking?'':"请输入余额"}  onChange={this.justGetInputValue.bind(this,5)} style={{width:'100%'}} min={0} step={0.01} precision={2} />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={4} className="clearfix">
                                <span  style={{ fontSize:'14px',float:'right' }}>{convertCurrency(isNaN(this.state.moneyLeft)?0:this.state.moneyLeft)}</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={7} >
                                <FormItem {...formItemLayout} label="总进线" style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('coillnsum', {

                                    })(
                                        <InputNumber  disabled={isLooking} placeholder={isLooking?'':"请输入总进线"}  onChange={this.handleAllSpentMoney.bind(this,2)} style={{width:'100%'}} min={0} step={1} precision={0} />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={7} offset={5}>
                                <FormItem {...formItemLayout} label="平均进线成本" style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('averagelinecost', {
                                    })(
                                        <InputNumber disabled  style={{width:'100%'}} min={0} step={0.01} precision={2} />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={4} className="clearfix">
                                <span  style={{ fontSize:'14px',float:'right' }}>{((allSpentMoney>0&&allInputLines>0&&allSpentMoney<allInputLines)?'小于1元':convertCurrency((allSpentMoney>0&&allInputLines>0)?Math.round(allSpentMoney/allInputLines):0))}</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={7} >
                                <FormItem {...formItemLayout} label="总推线"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('coiloutsum', {
                                    })(
                                        <InputNumber placeholder={isLooking?'':"请输入总推线"} disabled={isLooking} style={{width:'100%'}} min={0} step={1} precision={0} />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={7} offset={5}>
                                <FormItem {...formItemLayout} label="总沟通数"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('communication', {

                                    })(
                                        <InputNumber placeholder={isLooking?'':"请输入总沟通数"} disabled={isLooking} style={{width:'100%'}} min={0} step={1} precision={0} />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={7} >
                                <FormItem {...formItemLayout} label="总成单数"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('ordersum', {
                                    })(
                                        <InputNumber onChange={this.handleAllSpentMoney.bind(this,4)} placeholder={isLooking?'':"请输入总成单数"} disabled={isLooking} style={{width:'100%'}} min={0} step={0.01} precision={2} />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={7} offset={5}>
                                <FormItem {...formItemLayout} label="平台出单率"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('issueratio', {
                                    })(
                                        <Input   disabled addonAfter={'%'}/>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={7} >
                                <FormItem {...formItemLayout} label="总成单金额"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('ordersummoney', {
                                    })(
                                        <InputNumber  disabled={isLooking} placeholder={isLooking?'':"请输入总成单金额"}  onChange={this.handleAllSpentMoney.bind(this,3)} style={{width:'100%'}} min={0} step={0.01} precision={2} />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={4} className="clearfix">
                                <span  style={{ fontSize:'14px',float:'right' }}>{convertCurrency(isNaN(this.state.allOutput)||this.state.allOutput===1?0:this.state.allOutput)}</span>
                            </Col>

                            <Col span={7} offset={1}>
                                <FormItem {...formItemLayout} label="产出比值"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('outputratio', {
                                    })(
                                        <Input   disabled/>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={7} >
                                <FormItem {...formItemLayout} label="总产值"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('totalvalueofoutput', {
                                    })(
                                        <InputNumber  disabled={isLooking} placeholder={isLooking?'':"请输入总产值"}  onChange={this.justGetInputValue.bind(this,3)} style={{width:'100%'}} min={0} step={0.01} precision={2} />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={4} className="clearfix">
                                <span  style={{ fontSize:'14px',float:'right' }}>{convertCurrency(isNaN(this.state.allCharge)?0:this.state.allCharge)}</span>
                            </Col>
                            <Col span={7} offset={1}>
                                <FormItem {...formItemLayout} label="其中复购总值"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('recyclesum', {

                                    })(
                                        <InputNumber  disabled={isLooking} placeholder={isLooking?'':"请输入其中复购总值"}  onChange={this.justGetInputValue.bind(this,4)} style={{width:'100%'}} min={0} step={0.01} precision={2} />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={4} className="clearfix">
                                <span  style={{ fontSize:'14px',float:'right' }}>{convertCurrency(isNaN(this.state.againBoughtMoney)?0:this.state.againBoughtMoney)}</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={7}  >
                                <FormItem {...formItemLayout} label="要求录入时间"  style={{ minHeight: '60px', marginBottom: 0, }}>
                                    {getFieldDecorator('createtime', {
                                    })(
                                        <DatePicker  format="YYYY-MM-DD" disabled={isEdit||isLooking}  disabledDate={(val) => this.disabledDate(val)} />
                                    )}
                                </FormItem>
                            </Col>
                            {isRefund?'':(JSON.stringify(this.state.record)==='{}'||record.channelstate==1||record.channelstate==2)?
                            <Col span={7} offset={5}>
                                <FormItem {...formItemLayout} label="状态"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('channelstate', {
                                        initialValue:'1'
                                    })(
                                        <Select disabled={isLooking}>
                                            <Option value='1'>正常</Option>
                                            <Option value='2' disabled={(inputAllMoney>0||record.rechargesum>0)?false:true}>滞留</Option>
                                        </Select>
                                    )}
                                </FormItem>
                            </Col> :''}
                        </Row>
                        {isRefund?
                            <Row>
                            <Col span={7} >
                                <FormItem {...formItemLayout} label="上传凭证" style={{ minHeight: '120px', marginBottom: 0 }}>
                                    {getFieldDecorator('Filedata', {
                                        valuePropName: 'fileList', getValueFromEvent: this.normFile.bind(this),
                                    })(
                                        <Upload
                                            method="post"
                                            accept="image/*"
                                            name="Filedata"
                                            action={config.UploadFile + "/uploadpageimg"}
                                            beforeUpload={this.beforeUpload.bind(this)}
                                            listType="picture-card"
                                            className="upload-list-inline"
                                            onPreview={this.previewImg.bind(this)}
                                            showUploadList={{showPreviewIcon: true, showRemoveIcon:true }}
                                        >
                                            {(fileList.length >= 5) ?'':<div>
                                                <Icon type="plus" />
                                                <div className="ant-upload-text">点击上传图片</div>
                                            </div>}
                                        </Upload>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>:''}
                        { record.channelstate==3||record.channelstate==4?<Row>
                            <Col span={22} offset={1} >
                                <span style={{color: 'rgba(0, 0, 0, 0.85)',fontSize:'14px'}}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;凭据照片：</span>
                                {
                                    record.refundimg?(JSON.parse(record.refundimg)).length ? (JSON.parse(record.refundimg)).map((item,i)=>{
                                        return <a href={config.Filepath + item} target="_blank" key={i} style={{marginRight:'20px'}}>
                                            <img src={config.Filepath +item} style={{ height: "100px", width: "160px" ,verticalAlign:'top'}} />
                                        </a>
                                    }):<span style={{color:'red'}}>未上传凭据图片</span>:<span style={{color:'red'}}>未上传凭据图片</span>
                                }
                            </Col>
                        </Row>:''}
                        {JSON.stringify(this.state.record)==='{}'?'': <Row>
                            <Col span={10} offset={2}>
                                <p>录入时间：{record.createtime.split(' ')[0]}</p>
                            </Col>
                            <Col span={10} offset={2}>
                                <p>上次更新时间：{record.updatetime}</p>
                            </Col>
                        </Row>}
                    </Form>
                </Modal>
                {/* 预览图片对话框 */}
                <Modal visible={previewVisible} footer={null} onCancel={this.cancelPreview.bind(this)}>
                    <img alt="example" style={{ width: '100%' }} src={previewImage} />
                </Modal>
            </div>
        )
    }
}
const ChannelList = Form.create()(ChannelList1);
export default ChannelList;